<template>
  <div class="user">
    <div class="box">
      <img src="../../assets/image/user.jpg" alt="" />
      <div class="list">
        <el-row>
          <el-col :span="10"
            ><span style="font-weight: bold">昵称</span></el-col
          >
          <el-col :span="12">{{ $store.getters.username }}</el-col>
          <el-col :span="2"
            ><span
              @click="openName"
              style="font-size: 14px; color: rgb(39, 139, 255); cursor: pointer"
              >修改</span
            ></el-col
          >
        </el-row>
        <el-row>
          <el-col :span="10"
            ><span style="font-weight: bold">账号ID</span></el-col
          >
          <el-col :span="12">{{ $store.getters.userId }}</el-col>
          <el-col :span="2"></el-col>
        </el-row>
        <el-row>
          <el-col :span="10"
            ><span style="font-weight: bold">密码</span></el-col
          >
          <el-col :span="12">***********</el-col>
          <el-col :span="2"
            ><span
              style="font-size: 14px; color: rgb(39, 139, 255); cursor: pointer"
              @click="openPassWord"
              >修改</span
            ></el-col
          >
        </el-row>
        <el-row>
          <el-col :span="10"
            ><span style="font-weight: bold">手机号码</span></el-col
          >
          <el-col :span="12">{{ $store.getters.phone }}</el-col>
          <el-col :span="2"
            ><span
              style="font-size: 14px; color: rgb(39, 139, 255); cursor: pointer"
            ></span
          ></el-col>
        </el-row>
        <el-row>
          <el-col :span="10"
            ><span style="font-weight: bold">用户承担手续费</span></el-col
          >
          <el-col :span="12">{{ value1 == false ? "否" : "是" }}</el-col>
          <el-col :span="2">
            <el-switch
              @change="change1"
              v-model="value1"
              active-color="#13ce66"
              inactive-color="#ff4949"
            >
            </el-switch>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="10"
            ><span style="font-weight: bold">线下收费</span></el-col
          >
          <el-col :span="12">{{
            $store.getters.payWay == 0 ? "开启" : "关闭"
          }}</el-col>
          <el-col :span="2">
            <el-switch
              @change="change"
              v-model="value"
              active-color="#13ce66"
              inactive-color="#ff4949"
            >
            </el-switch>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="10"
            ><span style="font-weight: bold">线上收费</span></el-col
          >
          <el-col :span="12">{{
            $store.getters.payWay == 0 ? "关闭" : "开启"
          }}</el-col>
          <el-col :span="2"></el-col>
        </el-row>
      </div>
      <!-- 修改密码弹出框 -->
      <div class="passwordDialog">
        <el-dialog
          title="修改密码"
          :visible.sync="dialogVisible"
          :append-to-body="true"
          width="30%"
        >
          <el-form
            :model="ruleForm"
            status-icon
            :rules="rules"
            ref="ruleForm"
            label-width="100px"
            class="demo-ruleForm"
          >
            <el-form-item label="账户">{{
              $store.getters.username ? $store.getters.username : "管理员"
            }}</el-form-item>
            <el-form-item label="原密码" prop="oldPassword">
              <el-input
                show-password
                clearable
                v-model="ruleForm.oldPassword"
              ></el-input>
            </el-form-item>
            <el-form-item label="新密码" prop="password">
              <el-input
                show-password
                clearable
                v-model="ruleForm.password"
                autocomplete="off"
              ></el-input>
            </el-form-item>
            <el-form-item label="确认密码" prop="surePassword">
              <el-input
                show-password
                clearable
                v-model="ruleForm.surePassword"
                autocomplete="off"
              ></el-input>
            </el-form-item>
          </el-form>
          <span slot="footer" class="dialog-footer">
            <el-button @click="dialogVisible = false">取 消</el-button>
            <el-button
              type="primary"
              @click="editPassword"
              :disabled="
                ruleForm.oldPassword &&
                ruleForm.password &&
                ruleForm.surePassword
                  ? false
                  : true
              "
              >确 定</el-button
            >
          </span>
        </el-dialog>
      </div>
      <!-- 修改昵称 -->
      <div class="nameDialog">
        <el-dialog
          title="修改昵称"
          :visible.sync="nameDialogShow"
          width="30%"
          :close-on-click-modal="true"
          :destroy-on-close="true"
        >
          <el-form :model="nameForm" label-width="50px" class="demo-ruleForm">
            <el-form-item label="昵称">
              <el-input
                v-model="nameForm.name"
                clearable
                placeholder="请输入昵称"
              ></el-input>
            </el-form-item>
          </el-form>

          <span slot="footer" class="dialog-footer">
            <el-button @click="nameDialogShow = false">取 消</el-button>
            <el-button
              type="primary"
              @click="changeName"
              :disabled="nameForm.name ? false : true"
              >确 认</el-button
            >
          </span>
        </el-dialog>
      </div>
      <!-- 是否开启租币验证码 -->
      <div class="Dialog">
        <el-dialog
          @close="close(true)"
          title="开启线下收费"
          :visible.sync="dialogTrue"
          width="30%"
          :close-on-click-modal="false"
          :destroy-on-close="true"
        >
          <el-form :model="form" class="demo-ruleForm">
            <el-form-item>
              <el-input disabled v-model="form.phone">
                <template slot="prepend">手机号</template></el-input
              >
            </el-form-item>
            <el-form-item class="two">
              <el-input
                v-model="form.code"
                placeholder="请输入短信验证码"
              ></el-input>
              <el-button :disabled="disabled" @click="getCode" type="primary">{{
                text
              }}</el-button>
            </el-form-item>
          </el-form>

          <span slot="footer" class="dialog-footer">
            <el-button @click="close(true)">取 消</el-button>
            <el-button
              @click="changeType(1)"
              type="primary"
              :disabled="this.form.code ? false : true"
              >确 认</el-button
            >
          </span>
        </el-dialog>
      </div>
      <div class="Dialog">
        <el-dialog
          @close="close(false)"
          title="开启线上收费"
          :visible.sync="dialogFalse"
          width="30%"
          :close-on-click-modal="false"
          :destroy-on-close="true"
        >
          <el-form :model="form" class="demo-ruleForm">
            <el-form-item>
              <el-input disabled v-model="form.phone">
                <template slot="prepend">手机号</template></el-input
              >
            </el-form-item>
            <el-form-item class="two">
              <el-input
                v-model="form.code"
                placeholder="请输入短信验证码"
              ></el-input>
              <el-button :disabled="disabled" @click="getCode" type="primary">{{
                text
              }}</el-button>
            </el-form-item>
          </el-form>

          <span slot="footer" class="dialog-footer">
            <el-button @click="close(false)">取 消</el-button>
            <el-button
              @click="changeType(2)"
              type="primary"
              :disabled="this.form.code ? false : true"
              >确 认</el-button
            >
          </span>
        </el-dialog>
      </div>
    </div>
  </div>
</template>

<script>
import store from "@/store";
import {
  putPasswordApi,
  editNameApi,
  getCodeApi,
  changeTypeApi,
  isRentPayApi,
  setRentPayApi,
} from "../../api/user";
export default {
  data() {
    var validatePass = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请输入密码"));
      } else {
        if (this.ruleForm.surePassword !== "") {
          this.$refs.ruleForm.validateField("surePassword");
        }
        callback();
      }
    };
    var validatePass2 = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请再次输入密码"));
      } else if (value !== this.ruleForm.password) {
        callback(new Error("两次输入密码不一致!"));
      } else {
        callback();
      }
    };
    return {
      disabled: false,
      text: "获取验证码",
      form: {
        phone: sessionStorage.getItem("phone"),
        code: "",
      },
      time: null,
      dialogTrue: false,
      dialogFalse: false,
      value: false,
      value1: false,
      action: `https://system.ori-iot.com/meter/mini/server/user/${store.getters.userId}`,
      imageUrl: "",
      dialogVisible: false,
      ruleForm: {
        oldPassword: "",
        password: "",
        surePassword: "",
      },
      nameForm: {
        name: "",
      },
      nameDialogShow: false,
      rules: {
        password: [
          { validator: validatePass, trigger: "blur" },
          { required: true, message: "请输入新密码", trigger: "blur" },
        ],
        surePassword: [
          { validator: validatePass2, trigger: "blur" },
          { required: true, message: "请确认密码", trigger: "blur" },
        ],
        oldPassword: [
          { required: true, message: "请输入原密码", trigger: "blur" },
          { min: 6, message: "请输入正确密码", trigger: "blur" },
        ],
      },
    };
  },
  created() {
    this.isRentPay();
    if (
      sessionStorage.getItem("payWay") &&
      sessionStorage.getItem("payWay") == 1
    ) {
      this.value = false;
    } else {
      this.value = true;
    }
  },
  methods: {
    isRentPay() {
      isRentPayApi().then((res) => {
        if (res.code == 200) {
          this.value1 = res.data.isRenterPay;
        }
      });
    },
    changeType(e) {
      if (e == 1) {
        let arr = {
          code: this.form.code,
          flag: true,
          phone: this.form.phone,
        };
        changeTypeApi(arr).then((res) => {
          if (res.code == 200) {
            clearInterval(this.time);
            sessionStorage.setItem("payWay", 0);
            this.$store.dispatch("user/getInfo");
            this.disabled = false;
            this.text = "获取验证码";
            this.dialogTrue = false;
            this.$message.success("切换成功!");
          }
        });
      } else {
        let arr = {
          code: this.form.code,
          flag: false,
          phone: this.form.phone,
        };
        changeTypeApi(arr).then((res) => {
          if (res.code == 200) {
            clearInterval(this.time);
            sessionStorage.setItem("payWay", 1);
            this.$store.dispatch("user/getInfo");
            this.disabled = false;
            this.text = "获取验证码";
            this.dialogFalse = false;
            this.$message.success("切换成功!");
          }
        });
      }
    },
    // 获取验证码
    getCode() {
      let loading = this.$loading({
        lock: true,
        text: "发送中...",
        target: document.querySelector(".Dialog .el-dialog"),
      });
      let arr = {
        phone: this.form.phone,
        tenantId: sessionStorage.getItem("tenantId"),
      };
      getCodeApi(arr).then((res) => {
        if (res.code == 200) {
          loading.close();
          this.$message.success("发送成功!");
          this.disabled = true;
          let num = 60;
          this.time = setInterval(() => {
            if (num > 0) {
              num = num - 1;
              this.text = `${num}s后重新获取`;
            } else {
              this.disabled = false;
              this.text = "重新获取";
              clearInterval(this.time);
            }
          }, 1000);
        } else {
          loading.close();
        }
      });
    },
    close(e) {
      this.disabled = false;
      this.text = "获取验证码";
      clearInterval(this.time);
      this.dialogFalse = false;
      this.dialogTrue = false;
      if (
        sessionStorage.getItem("payWay") &&
        sessionStorage.getItem("payWay") == 1
      ) {
        this.value = false;
      } else {
        this.value = true;
      }
    },
    change(e) {
      if (e == true) {
        this.$confirm(`开启线下收费后,线上收费将失效, 是否继续?`, "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        })
          .then(() => {
            this.dialogTrue = true;
          })
          .catch(() => {
            this.value = false;
          });
      } else {
        this.$confirm(`关闭线下收费后,将会启用线上收费, 是否继续?`, "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        })
          .then(() => {
            this.dialogFalse = true;
          })
          .catch(() => {
            this.value = true;
          });
      }
    },
    change1(e) {
      let arr = {
        isRenterPay: e,
      };
      setRentPayApi(arr)
        .then((res) => {
          if (res.code == 200) {
            this.$message.success("修改成功!");
            this.isRentPay();
          }
        })
        .catch(() => {
          this.isRentPay();
        });
    },
    handleAvatarSuccess(res, file) {
      console.log(res);
      this.imageUrl = URL.createObjectURL(file.raw);
    },
    beforeAvatarUpload(file) {
      const isJPG = file.type === "image/jpeg";
      const isLt2M = file.size / 1024 / 1024 < 2;

      if (!isJPG) {
        this.$message.error("上传头像图片只能是 JPG 格式!");
      }
      if (!isLt2M) {
        this.$message.error("上传头像图片大小不能超过 2MB!");
      }
      return isJPG && isLt2M;
    },
    // 打开修改密码框
    openPassWord() {
      this.dialogVisible = true;
      this.ruleForm = {
        oldPassword: "",
        password: "",
        surePassword: "",
      };
    },
    editPassword() {
      let loading = this.$loading({
        lock: true,
        text: "修改中...",
        target: document.querySelector(".passwordDialog .el-dialog"),
      });
      putPasswordApi(this.ruleForm)
        .then((res) => {
          if (res.code == 200) {
            loading.close();
            this.dialogVisible = false;
            this.$message.success("修改成功!");
          } else {
            loading.close();
          }
        })
        .catch(() => {
          loading.close();
        });
    },
    // 打开修改昵称弹框
    openName() {
      this.nameForm = {
        name: this.$store.getters.username ? this.$store.getters.username : "",
      };
      this.nameDialogShow = true;
    },
    changeName() {
      const formData = new FormData();
      formData.append("userName", this.nameForm.name);
      editNameApi(this.$store.getters.userId, formData).then((res) => {
        if (res.code == 200) {
          this.$store.dispatch("user/getInfo");
          this.nameDialogShow = false;
          this.$message.success("修改成功!");
        }
      });
    },
  },
};
</script>

<style lang="scss">
.user {
  width: 100%;
  padding-top: 15px;
  padding: 0 15px;
  height: calc(100vh - 100px);
  .box {
    width: 95%;
    height: 95%;
    border-radius: 30px;
    background: #fff;
    margin: 0 auto;
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;
    img {
      width: 8%;
    }
    .list {
      width: 35%;
      height: 80%;
      .el-row {
        margin: 10% 0;
      }
    }
  }
  .Dialog {
    .el-dialog {
      width: 100%;
      .el-form-item {
        .el-form-item__content {
          display: flex;
          justify-content: space-around;
          align-items: center;
        }
      }
    }
  }
}
</style>